<!-- 练习题 -->
<template>
  <el-main style="padding: 20px">
  <!-- 名称修改 -->
   <el-dialog :visible.sync="upname" width="40%">
      <el-form class="demo-ruleForm">
        <div class="block">
          <el-tag style="margin-right:8px">试卷名称:</el-tag>
          <el-input style="margin-top:5%" v-model="form.tpname"></el-input>
        </div>
      </el-form>
      <el-button type="primary" style="margin-top:10%" size="mini" @click="upnameclick()"> 确认 </el-button>
    </el-dialog>
    <!--  -->
          <el-dialog :visible.sync="showtianjia" width="40%">
      <el-form class="demo-ruleForm">
        <div class="block">
          <el-tag style="margin-right:8px">选择分类:</el-tag>
          <el-cascader
          size="small"
            v-model="val2"
            :options="toplist"
            @change="handleChange"
            :props="listchange"
          ></el-cascader>
        </div>
      </el-form>
      <!-- <el-form class="demo-ruleForm" style="margin-top:5%">
        <div class="block">
          <el-tag style="margin-right:8px">选择类目:</el-tag>
          <el-cascader
             size="small"
            v-model="val3"
            :options="leimu"
            @change="handleChangeleimu"
            :props="listchanges"
          ></el-cascader>
        </div>
      </el-form> -->
      <el-button type="primary" style="margin-top:10%" size="mini" @click="addWord()"> 确认 </el-button>
    </el-dialog>

    <!-- 添加题库 -->
     <el-dialog :visible.sync="tikushow" width="40%">
      <el-form class="demo-ruleForm">
        <div class="block">
          <el-tag style="margin-right:8px">选择分类:</el-tag>
          <el-cascader
          size="small"
            v-model="val2"
            :options="toplist"
            @change="handleChange"
            :props="listchange"
          ></el-cascader>
        </div>
      </el-form>
      <!-- <el-form class="demo-ruleForm" style="margin-top:5%">
        <div class="block">
          <el-tag style="margin-right:8px">选择类目:</el-tag>
          <el-cascader
             size="small"
            v-model="val3"
            :options="leimu"
            @change="handleChangeleimu"
            :props="listchanges"
          ></el-cascader>
        </div>
      </el-form> -->
      <el-form class="demo-ruleForm" style="margin-top:5%">
        <div class="block">
          <el-tag style="margin-right:8px">试卷名称:</el-tag>
          <el-input  v-model="titlename"   style="margin-top:8px" placeholder="请输入自定义名称" size="small"></el-input>
        </div>
      </el-form>
      <el-button type="primary" style="margin-top:10%" size="mini" @click="addTiKu()"> 确认 </el-button>
    </el-dialog>
    <div >
        
        <div class="toplists">
          <!-- <el-upload
        class="upload-demo"
        :action="url"
        :on-preview="handlePreview"
        :on-remove="handleRemove"
        :http-request="uploadFile"
        :before-remove="beforeRemove"
        multiple
        :limit="3"
        :file-list="fileList"
      >
        <el-button size="small" type="primary"
          >导入习题(请导入.xlsx文件，编码为utf-8)</el-button
        >
      </el-upload> -->
          <div >
  
        </div>
        <div>
        <!-- <el-button
        size="small"
        @click="fenlei"
        type="primary"
        style="margin:0 20px"
        >选择分类</el-button
      ></el-button> -->
        </div>
             <div>
        <el-button
        size="small"
        @click="addtiku"
        type="primary"
        >添加试卷</el-button
      ></el-button>
                   <el-button
        size="small"
        @click="delExam"
        type="danger"
        >删除选中</el-button
      ></el-button>
          </div>
        </div>
    </div>
   <!-- <el-radio-group v-model="radio" style="margin-top: 20px;" v-if="typeList">
      <el-radio :label="item.categoryCode" v-for="(item, index) in typeList" :key="index">{{ item.categoryName }}</el-radio>
    </el-radio-group> -->

    <!-- <div class="table-box" v-if="dataExam.length==0?false:true">
      <el-table
        :data="dataExam"
        @selection-change="handleSelectionChange"
        style="width: 100%"
      >
        <el-table-column type="selection" width="55"></el-table-column>
        <el-table-column prop="content" label="题目" width="320"></el-table-column>
        <el-table-column
          v-if="dataExam.type == 1"
          prop="item"
          label="选项"
        ></el-table-column>
        <el-table-column prop="answer" label="答案" width="320"></el-table-column>
        <el-table-column prop="analysis" label="答案解析"></el-table-column>
        <el-table-column prop="item" label="选项"></el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button @click="setbianji(scope.row)" type="text" size="mini"
              >编辑</el-button
            >
            <el-button type="text" size="mini" @click="deleteObj(scope.row)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table> -->

      <div class="table-box" v-if="dataExam.length==0?false:true">
      <el-table
        :data="dataExam"
        @selection-change="handleSelectionChange"
        style="width: 100%"
      >
        <el-table-column type="selection" width="55"></el-table-column>
        <el-table-column prop="tpname" label="试卷名称" width="320"></el-table-column>
        <el-table-column
          v-if="dataExam.type == 1"
          prop="item"
          label="选项"
        ></el-table-column>
        <el-table-column prop="className" label="分类" width="320"></el-table-column>
        <!-- <el-table-column prop="typeName" label="类目">
          <template slot-scope="scope">
          <el-tag  @click="look(scope.row)" >{{scope.row.typeName}}</el-tag>
          </template>
        </el-table-column> -->
        <el-table-column label="操作">
          <template slot-scope="scope">
             <el-button @click="look(scope.row)" type="text" size="mini"
              >查看</el-button
            ></el-button>
            <el-button @click="setbianji(scope.row)" type="text" size="mini"
              >编辑</el-button
            >
          
            <el-button type="text" size="mini" @click="deleteObj(scope.row)"
              >删除</el-button
            >
              <el-button type="text" size="mini" @click="setConputerObj(scope.row)"
              >设置人机对话</el-button
            >
          </template>
        </el-table-column>
      </el-table> 

      <el-dialog :visible.sync="tianjia" width="80%">
        <el-form ref="form" :model="form" label-width="80px">
          <el-form-item label="题目"
            ><el-input v-model="form.content" placeholder="about"></el-input
          ></el-form-item>
          <el-form-item label="答案解析"
            ><el-input type="textarea" v-model="form.analysis"></el-input
          ></el-form-item>
          <el-form-item label="答案"
            ><el-input type="textarea" v-model="form.answer"></el-input
          ></el-form-item>
          <el-form-item label="选项"
            ><el-input
              type="textarea"
              v-model="form.item"
              placeholder="非必填,判断题和选择题的多选项用 - 隔开"
            ></el-input
          ></el-form-item>
          <el-form-item label="类型">
            <!-- <el-input type="textarea" v-model="form.type"></el-input> -->
            <el-radio-group v-model="setradio" style="margin-top: 20px">
              <el-radio
                :label="item.categoryCode"
                v-for="(item, index) in typeList"
                :key="index"
                >{{ item.categoryName }}</el-radio
              >
            </el-radio-group>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="onSubmit">保存</el-button>
            <el-button @click="tianjia = false">取消</el-button>
          </el-form-item>
        </el-form>
      </el-dialog>
      <el-pagination
        background
        layout="prev, pager, next"
        :page-count="data.pages"
        :current-page="current"
        @current-change="chaxun"
      ></el-pagination>

    </div>
  </el-main>
</template>

<script>
import axios from "axios";
export default {
  data() {
    return {
      upname: false,
      titlename: "",
      tikushow: false,
      showtianjia: false,
      listchange: {
        label: "className",
        value: "classId",
      },
      listchanges: {
        label: "typeName",
        value: "typeId",
      },
      val3: "",
      setradio: "",
      radio: 1,
      toplist: [],
      select: [],
      form: {},
      fileList: [],
      page: 1,
      typeList: [],
      dataExam: [],
      leimu: [],
      current: 1,
      size: 20,
      classId: "",
      val2: "",
      tianjia: false,
      Name: "",
      // url: 'https://api.shida123.cn/back/practicestores/importPractice'
      // url: 'https://api.shida123.cn/back/practicestores/importPractice'
      url: "http://localhost:8082/back/practicestores/importPractice",
    };
  },
  mounted: function () {
    // this.addWord();
    this.getFenlei();
    this.getType();
    this.getlists();
    // POST /back/practicestores/importPractice
  },
  // watch:{
  //   radio(){
  //     this.page = 1;
  //     this.addWord()
  //   }
  // },
  inject: ["reload"],
  methods: {
   async setConputerObj(obj){
      //console.log("obj",obj)
      const  id = obj.id;
     let result =await this.postJson("/back/testpaper/setPeopleTalk",{id:1,sj_id:id})
      //console.log("result",result)
       this.$message({
          message: result.data.msg,
        });
    },
    // 查看
    look(val) {
      //console.log(val);
      this.$router.push({ path: "/shijuaninfo?id=" + val.id });
    },
    // 获取所有
    getlists() {
      let params = {
        page: this.page,
        size: this.size,
      };
      this.postRequest(`/back/testpaper/queryTestPaperList`, params).then(
        (res) => {
          this.dataExam = res.data.data.list;
          this.dataExam.forEach((item, i) => {
            if (Array.isArray(item.item)) {
              this.dataExam[i].item = item.item.join(" - ");
            }
            // isArray(item.item)
          });
          this.data = res.data.data;
          //console.log(res);
        }
      );
    },
    //修改名称
    upnameclick() {
      let parmas = {
        classId: this.form.classId,
        id: this.form.id,
        tpname: this.form.tpname,
        className: this.form.className,
      };
      this.postJson("/back/testpaper/editTestPaper", parmas).then((res) => {
        this.$message({
          message: "修改成功",
          type: "success",
        });
        this.getlists();

        this.upname = false;
      });
    },
    addtiku() {
      this.tikushow = true;
    },
    //上传
    uploadFile(param) {
      var fileObj = param.file;
      var form = new FormData(); //在创建FormData对象时指定表单的元素  我们需要传的参数
      form.append("file", param.file);
      form.append("typeId", this.val3[0]);
      this.uploadFileRequest("/back/practicestores/importPractice", form).then(
        (res) => {
          //console.log(res);
          if (res.data.code == 10000) {
            this.$message({
              type: "success",
              message: "上传成功",
            });
          }
        }
      );
      //  axios({
      //    method: 'POST',
      //    url: this.url,
      //    headers: {
      //      'Content-Type': 'multipart/form-data'
      //    },
      //    data:form
      //  }).then(res => {
      //    //console.log(res)
      //    if(res.data.code == 10000){
      //      this.$message({
      //        type:'success',
      //        message:"上传成功"
      //      })
      //    }
      //  })
    },

    //獲取分类
    getFenlei() {
      this.postRequest(
        "/back/class/queryPracticeClassList?pageNo=" +
          this.currentPage +
          "&pageSize=20"
      ).then((res) => {
        this.toplist = res.data.data;
      });
    },
    fenlei() {
      this.showtianjia = true;
    },
    //选择结果
    handleChange(e) {
      this.classId = e[1];

      for (let i = 0; i < this.toplist.length; i++) {
        if (this.toplist[i].classId == e[0]) {
          for (let j = 0; j < this.toplist[i].children.length; i++) {
            if (this.toplist[i].children[j].classId == e[1]) {
              this.Name = this.toplist[i].children[j].className;
            }
          }
        }
      }
      let obj = this.classId;
      this.postJson("/back/chaptertype/queryListByClassId", obj).then((res) => {
        this.leimu = res.data.data;
      });
    },
    handleChangeleimu(e) {
      this.val3 = e;
      //console.log(this.val3);
    },
    getTypeExam() {},
    handleSelectionChange(e) {
      //console.log(e);
      this.select = e;
    },
    delExam() {
      let arr = [];
      this.select.forEach((item) => {
        arr.push(item.id);
      });
      arr = arr.join(",");
      //console.log(arr);
      this.postJson("/back/testpaper/delete", arr).then((res) => {
        //console.log(res);
        this.reload();
        this.$message(res.data.msg);
      });
    },
    deleteObj(e) {
      let parmas = e.id;
      // this.postRequest("/back/practicestores/deletePractice?ids=" + e.practiceId).then(
      //   (res) => {
      //     //console.log(res);
      //     this.reload();
      //     this.$message(res.data.msg);
      //   }
      // );
      this.postJson("/back/testpaper/delete", parmas).then((res) => {
        //console.log(res);
        this.reload();
        this.$message(res.data.msg);
      });
    },
    setbianji(e) {
      //console.log(e);
      this.upname = true;
      this.form = e;
      // this.setradio = this.form.type;
      // this.tianjia = true;
    },
    onSubmit() {
      //console.log(this.form);
      if (this.form.item != null) {
        this.form.item = this.form.item.split("-");
      }
      // isArray(item.item)
      this.postJson(
        "/back/practicestores/updatePractice?id=" + this.form.practiceId,
        this.form
      ).then((res) => {
        //console.log(res);
        this.$message(res.data.msg);
      });
    },
    chaxun(val) {
      //console.log(val);
      this.page = val;
      this.addWord();
    },
    getType() {
      this.postRequest("/comm/queryCategoryByType", {
        type: "practice_type",
      }).then((res) => {
        //console.log(res);
        this.typeList = res.data.data;
        this.radio = this.typeList[0].categoryCode;
      });
    },
    addTiKu() {
      this.tikushow = false;
      let params = {
        className: this.Name,
        classId: this.classId,
        tpname: this.titlename,
      };
      this.postJson(`/back/testpaper/addShoreHouse`, params).then((res) => {
        let params = {
          page: this.page,
          size: this.size,
          classId: this.classId,
        };
        this.postRequest(`/back/testpaper/queryTestPaperList`, params).then(
          (res) => {
            this.dataExam = res.data.data.list;
            this.dataExam.forEach((item, i) => {
              if (Array.isArray(item.item)) {
                this.dataExam[i].item = item.item.join(" - ");
              }
              // isArray(item.item)
            });
            this.data = res.data.data;
            //console.log(res);
          }
        );
      });
    },
    addWord() {
      this.showtianjia = false;
      let params = {
        page: this.page,
        size: this.size,
        classId: this.classId,
      };
      this.postRequest(`/back/testpaper/queryTestPaperList`, params).then(
        (res) => {
          this.dataExam = res.data.data.list;
          this.dataExam.forEach((item, i) => {
            if (Array.isArray(item.item)) {
              this.dataExam[i].item = item.item.join(" - ");
            }
            // isArray(item.item)
          });
          this.data = res.data.data;
          //console.log(res);
        }
      );
      // let params = {
      //   page: this.page,
      //   size: this.size,
      //   type: this.radio,
      //   typeId:this.val3[0]
      // };
      // this.postRequest(`/back/practicestores/queryPracticeList`, params).then((res) => {
      //   this.dataExam = res.data.data.list;
      //   this.dataExam.forEach((item, i) => {
      //     if (Array.isArray(item.item)) {
      //       this.dataExam[i].item = item.item.join(" - ");
      //     }
      //     // isArray(item.item)
      //   });
      //   this.data = res.data.data;
      //   //console.log(res);
      // });
    },
    handleRemove(file, fileList) {
      //console.log(file, fileList);
    },
    handlePreview(file) {
      //console.log(file);
    },
    beforeRemove(file, fileList) {
      return this.$confirm(`确定移除 ${file.name}？`);
    },
  },
};
</script>

<style>
.topclass {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}
.liststop {
  display: flex;
  flex-direction: row;
  align-items: center;
}
.toplists {
  display: flex;
  flex-direction: row;
  align-items: center;
}
</style>
